<template>

</template>
<script>
import * as echarts from "echarts";

export default {
  name: "SortHistogram",
  mounted(){
    this.initCharts()
  },
  methods: {

    initCharts() {
      const dom = document.getElementById("left-top");
      const myChart1 = echarts.init(dom);

      let option;
      const updateFrequency =1000;
      const countryColors = {
        '日本': 'yellow',
        '中国': 'red',
        '印度': '#002a8f',
        '伊朗': '#003580',
        '新加坡': '#ed2939',
        '菲律宾': '#000',
        '印度尼西亚': '#003897',
        '巴基斯坦': '#f93',
      };
      $.when(
          // $.getJSON('json/data.json'),
          $.getJSON(this.$BaseUrl+'/worldAsiangameInfo/getall')
      ).done(function (res1) {
        // const flags =res0[0];
        //预处理后端传来的数据
        let arrArr=[];
        let dimensions=Object.keys(res1[0])
        res1.forEach((value,index)=>{
          arrArr[index]=[];
          dimensions.forEach(val => {
            arrArr[index].push(value[val]||null)
          });
        });
        //初始化数据
        const data =arrArr;
        const years = [];
        for (let i = 0; i < data.length; ++i) {
          if (years.length === 0 || years[years.length - 1] !== data[i][0]) {
            years.push(data[i][0]);
          }
        }
        let startIndex =0;
        let startYear = years[startIndex];
        option = {
          grid: {
            top: 10,
            bottom: 30,
            left: 50,
            right: 80
          },
          xAxis: {
            max: 'dataMax',
            axisLabel: {
              formatter: function (n) {
                return n + '';
              }
            }
          },
          dataset: {
            source: data.slice(1).filter(function (d) {
              return d[0] === startYear;
            })
          },
          yAxis: {
            type: 'category',
            inverse: true,
            max: 10,
            axisLabel: {
              show: true,
              fontSize: 10,
              formatter: function (value) {
                return value
                // return value +'{flag|' + getFlag(value) + '}';
              },
              rich: {
                flag: {
                  fontSize: 25,
                  padding: 5
                }
              }
            },
            animationDuration: 300,
            animationDurationUpdate: 300
          },
          series: [
            {
              realtimeSort: true,
              seriesLayoutBy: 'column',
              type: 'bar',
              itemStyle: {
                color: function (param) {
                  return countryColors[param.value[1]] || 'aqua';
                }
              },
              encode: {
                x:2,
                y:1
              },
              label: {
                show: true,
                precision: 1,
                position: 'right',
                valueAnimation: true,
                fontFamily: 'monospace'
              }
            }
          ],
          // Disable init animation.
          animationDuration: 0,
          animationDurationUpdate: updateFrequency,
          animationEasing: 'linear',
          animationEasingUpdate: 'linear',
          graphic: {
            elements: [
              {
                type: 'text',
                right: 10,
                bottom: 60,
                style: {
                  text: startYear,
                  font: 'bolder 80px monospace',
                  fill: 'red'
                },
                z: 100
              }
            ]
          }
        };
        // console.log(option);
        myChart1.setOption(option);
        for (let i = startIndex; i < years.length - 1; ++i) {
          (function (i) {
            setTimeout(function () {
              updateYear(years[i + 1]);
            }, (i - startIndex) * updateFrequency);
          })(i);
        }
        function updateYear(year) {
          let source = data.slice(1).filter(function (d) {
            return d[0] === year;
          });
          option.series[0].data = source;
          option.graphic.elements[0].style.text = year;
          myChart1.setOption(option);
        }
      });

      if (option && typeof option === 'object') {
        myChart1.setOption(option);
      }
      window.addEventListener("resize",()=>{
        myChart1.resize();
      });
    }
  }
}
</script>
